<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0059)http://javascript.internet.com/games/crab-race-example.html -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=JavaScript>
<!-- Original:  Mike McGrath (mike_mcgrath@lineone.net) -->
<!-- Web Site:  http://website.lineone.net/~mike_mcgrath -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function browser_check() {
var lecture = "Your browser does not support dynamic HTML   \n"
+"- this page cannot display in your browser.";
var browser = (document.all || document.layers) ? true : alert(lecture);
}
//  End -->
</SCRIPT>

<META content="MSHTML 5.50.4611.1300" name=GENERATOR></HEAD>
<BODY onload=browser_check()>
<SCRIPT language=JavaScript>

<!-- Begin
// where you stored the crab image on your server
var pic = "http://javascript.internet.com/img/crab/crab.gif";

var mask = '<IMG SRC="' + pic + '">';
var fancy, stake, level, winner;
var total = 10000;
var running = 0;
var stopped = 1;
var odds  = new Array();
var step  = new Array();

var band='<TABLE BORDER=1 BORDERCOLOR=#000000 WIDTH=300 HEIGHT=160 ALIGN=CENTER CELLPADDING=0 CELLSPACING=0><FORM NAME="f"><TR>';
band  += '<TD COLSPAN=4 BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT NAME="msg" SIZE=24 VALUE="" ></TD></TR><TR>';
band  += '<TD BGCOLOR=#FF0000 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT  NAME="box0" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="red" onclick="choose_fancy(this.form,this.value);"></TD>';
band  += '<TD BGCOLOR=#00FF00 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT  NAME="box1" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="green" onclick="choose_fancy(this.form,this.value);"></TD>';
band  += '<TD BGCOLOR=#0000FF ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT  NAME="box2" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="blue" onclick="choose_fancy(this.form,this.value);"></TD>';
band  += '<TD BGCOLOR=#FFF000 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=TEXT  NAME="box3" SIZE=3 VALUE="" onfocus="blur(this)"><BR><INPUT TYPE=RADIO NAME="back" VALUE="yellow" onclick="choose_fancy(this.form,this.value);"></TD></TR><TR>';
band  += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 1000 " onclick="choose_stake(this.form,this.value);"></TD>';
band  += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 2000 " onclick="choose_stake(this.form,this.value);"></TD>';
band  += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 3000 " onclick="choose_stake(this.form,this.value);"></TD>';
band  += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON VALUE=" 4000 " onclick="choose_stake(this.form,this.value);"></TD></TR><TR>';
band  += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON NAME="next" VALUE="Reset" onclick="init();"></TD>';
band  += '<TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT NAME="wlt" TYPE=TEXT SIZE=5 VALUE='+total+' onfocus="blur(this)"></TD>';
band  += '<TD COLSPAN=2 BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE><INPUT TYPE=BUTTON NAME="go" VALUE=" Start Race  " onclick="lets_go(this.form);"></TD></TR></FORM></TABLE>';
if(document.all)
{ 
var content=('<DIV ID="trak" STYLE="position:absolute; top: 20; left:20; width:300; height:100; background:#000000;"></DIV>');
content  += ('<DIV ID="line" STYLE="position:absolute; top: 20; left:287;width:  1; height:100; background:#FFFFFF;"></DIV>');
content  += ('<DIV ID="book" STYLE="position:absolute; top:120; left:20; width:300; height:160; background:#C0C0C0;">'+band+'</DIV>');
content  += ('<DIV ID="redc" STYLE="position:absolute; top: 23; left:20; width: 31; height: 22; background:#FF0000;">'+mask+'</DIV>');
content  += ('<DIV ID="grnc" STYLE="position:absolute; top: 47; left:20; width: 31; height: 22; background:#00FF00;">'+mask+'</DIV>');
content  += ('<DIV ID="bluc" STYLE="position:absolute; top: 71; left:20; width: 31; height: 22; background:#0000FF;">'+mask+'</DIV>');
content  += ('<DIV ID="yelc" STYLE="position:absolute; top: 96; left:20; width: 31; height: 22; background:#FFF000;">'+mask+'</DIV>');
}
else if (document.layers)
{
var content=('<LAYER ID="trak" top=" 20" left="20" width="300" height="100" bgColor="#000000"></LAYER>');
content  += ('<LAYER ID="line" top=" 20" left="287" width="1"  height="100" bgColor="#FFFFFF"></LAYER>');
content  += ('<LAYER ID="book" top="120" left="20" width="300" height="160" bgColor="#C0C0C0">'+band+'</LAYER>');
content  += ('<LAYER ID="redc" top=" 23" left="20" width=" 31" height=" 22" bgColor="#FF0000">'+mask+'</LAYER>');
content  += ('<LAYER ID="grnc" top=" 47" left="20" width=" 31" height=" 22" bgColor="#00FF00">'+mask+'</LAYER>');
content  += ('<LAYER ID="bluc" top=" 71" left="20" width=" 31" height=" 22" bgColor="#0000FF">'+mask+'</LAYER>');
content  += ('<LAYER ID="yelc" top=" 96" left="20" width=" 31" height=" 22" bgColor="#FFF000">'+mask+'</LAYER>');
}
document.write(content);
init();
function init()
{
if(!running)
{
fancy="";
stake="";
level="";
stopped = 0;
for(i=0; i<4; i++)
{
odds[i] = Math.round(Math.random() * 3)+1;
step[i] = eval(10 - odds[i]);
odds[i] +="/1";
}
if(document.all)
{
document.all.msg.value  = "Place your bet ..."
document.all.box0.value = odds[0];
document.all.box1.value = odds[1];
document.all.box2.value = odds[2];
document.all.box3.value = odds[3];
for(i=0; i<4; i++)
{
document.all.back[i].checked=0;
}
document.all.redc.style.left=20;
document.all.grnc.style.left=20;
document.all.bluc.style.left=20;
document.all.yelc.style.left=20;
}
if(document.layers)
{
with(document.book)
{
document.f.msg.value  = "Place your bet ..."
document.f.box0.value = odds[0];
document.f.box1.value = odds[1];
document.f.box2.value = odds[2];
document.f.box3.value = odds[3];
for(i=0; i<4; i++)
{
document.f.back[i].checked=0;
   }
}
document.redc.left = 20;
document.grnc.left = 20;
document.bluc.left = 20;
document.yelc.left = 20;
      }    
   }
}
function choose_fancy(f,color)
{
if(!running) 
{ 
switch(color)
{
case "red"    : level=odds[0]; break;
case "green"  : level=odds[1]; break;
case "blue"   : level=odds[2]; break;
case "yellow" : level=odds[3]; break;
}
fancy = color;
if(stake != "") f.msg.value="Bet: "+fancy+" "+stake+" ("+level+")";
else f.msg.value= "Selected "+fancy;
   }
}
function choose_stake(f,amount)
{
if(!running) 
{
stake = amount;
if(fancy != "") f.msg.value="Bet: "+fancy+" "+stake+" ("+level+")";
else f.msg.value = "Stake "+stake;
   }
}

function lets_go(f)
{
if(!running && stopped) init();
if(!running && !stopped)
{
if(stake > parseInt(f.wlt.value)) f.msg.value="Cannot bet this amount!";
else
if(fancy == "") f.msg.value="Select a color";
else
if(stake == "") f.msg.value="Click a bet amount";
else
{
running = 1;
run_race();
      }
   }
}
function run_race()
{
var n = Math.floor(Math.random() * 4);
if(document.all)
{
switch(n)
{
case 0 : document.all.redc.style.left = parseInt(document.all.redc.style.left)+step[0];
         if(parseInt(document.all.redc.style.left) >= 288) 
         {
         document.all.redc.style.left = 288;
         winner = "red";
         running = 0;
         stopped = 1;
         }
         break;

case 1 : document.all.grnc.style.left = parseInt(document.all.grnc.style.left)+step[1];
         if(parseInt(document.all.grnc.style.left) >= 288) 
         {
         document.all.grnc.style.left = 288;
         winner = "green";
         running = 0;
         stopped = 1;
         }
         break;

case 2 : document.all.bluc.style.left = parseInt(document.all.bluc.style.left)+step[2];
         if(parseInt(document.all.bluc.style.left) >= 288) 
         {
         document.all.bluc.style.left = 288;
         winner = "blue";
         running = 0;
         stopped = 1;
         }
         break;

case 3 : document.all.yelc.style.left = parseInt(document.all.yelc.style.left)+step[3];
         if(parseInt(document.all.yelc.style.left) >= 288) 
         {
         document.all.yelc.style.left = 288;
         winner = "yellow"; 
         running = 0;
         stopped = 1;
         }
         break;
   }
}
if(document.layers)
{
switch(n)
{
case 0 : document.redc.left += step[0];
         if(document.redc.left >= 288)
         {
         document.redc.left = 288;
         winner = "red"; 
         running = 0;
         stopped = 1;
         }
         break;
case 1 : document.grnc.left += step[1];
         if(document.grnc.left >= 288)
         {
         document.grnc.left = 288;
         winner = "green";
         running = 0;
         stopped = 1;
         }
         break;
case 2 : document.bluc.left += step[2];
         if(document.bluc.left >= 288)
         {
         document.bluc.left = 288;
         winner = "blue";
         running = 0;
         stopped = 1;
         }
         break;
case 3 : document.yelc.left += step[3];
         if(document.yelc.left >= 288)
         {
         document.yelc.left = 288;
         winner = "yellow";
         running = 0;
         stopped = 1;
         }
         break;
   }
}
if(running) window.setTimeout("run_race()", 100);
else
results();
}
function results()
{
if(document.all)
{
if(winner == fancy)
{
var winnings = parseInt(stake) * parseInt(level.charAt(0));
document.f.msg.value = winner+" wins: win "+winnings;
total += winnings;
document.f.wlt.value = total;
}   
else
{
document.f.msg.value = winner+" wins: lose "+stake;
total -= parseInt(stake);
document.f.wlt.value = total;
}
if(parseInt(document.f.wlt.value) == 0) var refill = confirm("You're Broke! - Play Again? ");
if(refill)
{
total = 10000;
document.f.wlt.value = total;
init();
   }
}
if(document.layers)
{
with(document.book)
{
if(winner == fancy)
{
var winnings = parseInt(stake) * parseInt(level.charAt(0));
document.f.msg.value = winner+" wins: win "+winnings;
total += winnings;
document.f.wlt.value = total;
}   
else
{
document.f.msg.value = winner+" wins: lose"+stake;
total -= parseInt(stake);
document.f.wlt.value = total;
}
if(parseInt(document.f.wlt.value) == 0) var refill = confirm("You're Broke! - Play Again? ");
if(refill)
{
total = 10000;
document.f.wlt.value = total;
init();
         }
      }
   }
}
//  End -->
</SCRIPT>
</BODY></HTML>
